<template>
	<div class="contain1">
		<div class="inlineblock tree">
			<!--<el-tree :data="treedata" default-expand-all :expand-on-click-node="false" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
			<el-tree :props="defaultProps"  :load="loadNode" lazy node-key="code" :expand-on-click-node="false" @node-click="handleNodeClick" ref = "treeData"
			 :highlight-current="true"
			:default-expanded-keys="['quanbuzuzhi']"
  			:default-checked-keys="['quanbuzuzhi']"> </el-tree>
		</div>
		<div class="inlineblock treeright">
			<div class="penalrow selectw100" style="padding-left: 0;">
	            <div class="inlineblock verticalmiddle">
	              <!--<div class="inlineblock verticalmiddle" style="margin-left: 5px;">
	                姓名
	              </div>-->
	              <div class="inlineblock verticalmiddle" style="margin-left:5px;">
	                <el-input  v-model="keyName" size="mini" placeholder="职员名称" @keyup.enter.native="cmdfind"></el-input>
	              </div>
	              <div class="inlineblock verticalmiddle searchIcon" style="margin-left: 20px;">
					<!--<el-button type="primary" size="mini" @click="empty">清空</el-button>-->
	              	<el-button  size="mini" @click="cmdfind" icon="el-icon-search"></el-button>
	             
	            	</div>
	            </div>
             <div class="basicRightDistanceA" style="position:absolute;">
            
               
              <!--<el-button type="primary" size="mini">同步</el-button>-->
            </div>
        </div>
        <div class="separaterow" style="height:calc(100% - 58px)">
        	<el-table
			    :data="userData"
			    style="width: 100%"
			    size="mini"
				class="tableCon selectTable"
				height="calc(100% - 52px)"
				@select = "selectRow"
				ref="multipleTable"
			    >
			    <el-table-column
					type="selection"
					fixed
					width="55">
				</el-table-column>
				<el-table-column property="name" label="姓名"  fixed  min-width="80px">
				</el-table-column>
				<el-table-column property="loginid" label="账号" fixed min-width="100px">
				</el-table-column>
				<el-table-column property="status" label="状态" width="80px">
					<template slot-scope="scope" >
						{{scope.row.status == 0 ? '在职' : (scope.row.status == 1 ? '离职' : '')}}
					</template>
				</el-table-column>
				<el-table-column property="sex" label="性别" width="60px" >
					<template slot-scope="scope" >
						<!--{{newOrEdit=='new'?'新增':(newOrEdit=='edit'?'编辑':'查看')}}供应商-->
						{{scope.row.sex == 1 ? '男' : (scope.row.sex == 2 ? '女' : '')}}
					</template>
				</el-table-column>
				<el-table-column property="mobile" label="手机" width="160px">
				</el-table-column>
				<el-table-column property="email" label="e-mail" min-width="200px">
				</el-table-column>
				<el-table-column property="departmentname" label="所属单位" min-width="160px">
				</el-table-column>
				<!--<el-table-column property="station" label="岗位" width="160px">
				</el-table-column>
				<el-table-column property="group" label="班组职务" width="160px">
				</el-table-column>-->
				<!--<el-table-column property="n" label="工号"    min-width="160px">
				</el-table-column>-->
				
			  </el-table>
			<div class="block  floatright" style="margin-top: 10px;">
				<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange" 
					:current-page="staffQuery.page"
					:page-sizes="[20,30,40,50]" 
					:page-size="staffQuery.pageCount" 
					:pager-count="5"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="rowNumber">
				</el-pagination>
			</div>
			
		</div>
	
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				keyName:'',
				userData:[],
				treedata: [],
			    defaultProps: {
			        children: 'childs',
					label: 'shortname',
					isLeaf: 'leaf'
			    },
			    staffQuery: {
	              page: 1, //第几页
	              pageCount:20 //页面得记录条数
	            },
	            orgcode:'',
	            rowNumber:0,
				treeData:{},
				selectOldRow:null,
			};
		},
		mounted(){
			this.cmdfind(this.staffQuery);
		},
		methods: {
			empty(){
				this.keyName = '';
			},
			// 获取树列表
			getData(data){
				// this.$http({
				// 	method: "get",
				// 	apiUrl: 'systemmanage/newDepartmentTree.htm',
					
				// }).then(res=>{
				// 	if(res.code == 0){
				// 		this.treedata = res.data;
				// 	}
				// })
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: '/getDepTree.htm',
						method: "post",
						params: {
							code: data.code
						},
						isJson: false,

					}).then(res => {
						if (res.code == 0) {
							resolve(res)
						}
					})
				})
			},
			loadNode(node, resolve) {
				if (node.level === 0) {
					resolve([{ shortname: '所有组织' ,code:"quanbuzuzhi",}])
				}
				if (node.level >= 1){
					this.getData(node.data).then(res => {
						resolve(res.data);
					})
				} 
			},
			// 点击树列表 加载对应员工信息
		     handleNodeClick(data) {
				this.treeData = data;
				this.$emit('ievent',this.treeData);
				this.shortname = data.shortname
                this.orgcode = data.code;
				this.cmdfind(this.staffQuery);
			},
			cmdfind(parp){
				var sendData={
					name:this.keyName,
					orgcode:this.orgcode,
					page: parp.page, //第几页
	              	pageCount:parp.pageCount //页面得记录条数
				};
				
				this.$http({
					method: 'post',
					apiUrl: 'dep/staffquery.htm',
					params: sendData,
					isJson:false,
				}).then(res=>{
					if(res.code === 0){
						res.data.forEach(function(item){
							item.check = false;
						})
						this.userData = res.data;
						if(!res.pageinfo ){
							this.rowNumber  = 0;
						}else if(res.pageinfo && !res.pageinfo.rowNumber){
							this.rowNumber  = 0;
						}else{
							this.rowNumber  = res.pageinfo.rowNumber;
						}
					}else{
						this.$message({
							type: 'info',
							message: res.description,
						});
					}
					
				})
				
			},
			// 员工列表只能单选
			selectRow(selection, row){
				
				selection = this.$refs.multipleTable.selection
				if (selection.length > 1) {
					selection.shift()
				} 
				if(selection.length != 0){
					this.$emit('staffEvent',row);
				}else{
					this.$emit('staffEvent',{});
				}


			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
		    handleCurrentChange: function(val) {
				this.staffQuery.page = val;
			},
			handleSizeChange: function(val) {
				this.staffQuery.pageCount = val;
			}, 
    		
		},
		watch:{
			staffQuery : {
		          handler(val, oldVal){
		            this.cmdfind(this.staffQuery)
		          },
		          deep:true
	        },
	        
		},
		computed: {
			
		    ...mapState(['tableHeightA'])
		    
		  },
	}
	
		
</script>
	
<style scoped>
	.contain1{
		height: 100%;
	}
	.tree {
		width: 28%;
		height: 100%;
		overflow: auto;
		background-color: #fff;
	}
	.treeright {
		width: 70%;
		height: 100%;
		float: right;
	}
</style>
<style>
  .selectTable .el-table__header thead th:nth-of-type(1) .cell{
      display: none;
    }
  
</style>